import React, { useState, useMemo,useEffect } from 'react'
import { Menu } from "antd"
import menuConfig from "../config/menuConfig"

export default function MyMenu() {
    const [userInfo, setUserInfo] = useState({role:{}})
    useEffect(()=>{
        const userInfo = JSON.parse(localStorage.userInfo || "{}")
        setUserInfo(userInfo)
        console.log("MyMenu加载");
    },[])
    const deepMenus = (array, news=[])=> {
        const {menus} = userInfo.role
        for (const menu of array) {
            if (menus && menus.includes(menu.key)) {
                if (!menu.children) {
                    news.push(menu)
                } else {
                    let node = { ...menu, children: [] }
                    news.push(node)
                    deepMenus(menu.children, node.children)
                }
            }
        }
        return news
    }

    return (
        <Menu
            theme="dark"
            defaultSelectedKeys={['/home/main']}
            defaultOpenKeys={["/home/product", "/home/charts"]}
            mode="inline"
            items={deepMenus(menuConfig)}
        >
            {/* <Menu.item></Menu.item>
            <Menu.SubMenu>
                <Menu.item></Menu.item>
            </Menu.SubMenu> */}
        </Menu>
    )
}
